<template>
	<view class="unt-coupon-select-contanier">
		<view class="select-content" @click="show=true">
			<text class="name">优惠劵：</text>
			<template v-if="list.length>0">
				<view class="num-desc" v-if="!data.couponId">
					<text class="desc">有{{list.length}}张优惠劵可用</text>
					<unt-icon name="icon-arrow" color="#FC483C" size="12" :styleCss="{marginLeft:'15rpx'}"></unt-icon>
				</view>
				<view class="num-price" v-else>-¥ {{data.reducePrice}}</view>
			</template>
			<template v-else>
				<view class="not-coupon">暂无可用优惠劵</view>
			</template>
		</view>
		<u-popup :show="show" @close="show=false" @open="show=true" :round='20'>
			<view class="coupon-list" v-if="list.length">
				<view class="item flex flex-sb flex-wrap" v-for="(item,index) in list" :key="index"
					@click="handleChange(item)">
					<view class="title-time">
						<view class="title">{{item.name}}</view>
						<view class="valid-time">{{item.expireType==10?`领取后${item.expireDay}天有效`:'有效期：'+item.expireDay}}
						</view>
					</view>
					<view class="price-condition">
						<view class="price">¥<text
								class="price-num">{{item.couponType==10?item.reducePrice:item.discount+'折'}}</text>
						</view>
						<view class="condition">最低消费 {{item.minPrice}} 元</view>
					</view>
					<view class="split-line"></view>
					<view class="use-explain">
						<view class="explain-content">
							<text class="li">{{item.description}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 空 -->
			<unt-empty type="coupon" style="margin-bottom: 150rpx;" v-else></unt-empty>
			<!-- 空 -->
			<!-- 底部按钮 -->
			<view class="addres-fixed">
				<view class="addres-fixed-content">
					<view class="add-addres-btn flex" @click="handleNotused()">
						<text class="text">不使用优惠劵</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import prop from "./props.js"
	export default {
		name: "unt-coupon-select",
		mixins: [prop],
		data() {
			return {
				show: false,
				data: {},
				list: [],
			};
		},
		watch: {
			couponDefaut: {
				handler(val) {
					if (val != null && val.length > 0) {
						this.list = val;
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			handleNotused(){
				this.data={};
				this.$emit('update:couponMoney', 0);
				this.$emit('update:couponId','');
				this.show = false;
			},
			resetting(){
				this.data={};
			},
			handleChange(val) {
				this.$emit('update:couponMoney', val.reducePrice);
				this.$emit('update:couponId', val.couponId);
				this.data = val;
				this.show = false;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.unt-coupon-select-contanier {
		width: 100%;

		.select-content {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name {
				font-size: 28rpx;
				width: 160rpx;
			}

			.num-desc {
				.desc {
					font-size: 28rpx;
					color: #FC483C;
				}
			}

			.num-price {
				font-size: 28rpx;
				color: #FC483C;
			}

			.not-coupon {
				font-size: 28rpx;
			}
		}

		.coupon-list {
			width: 100%;
			padding: 20rpx 30rpx;
			margin-top: 20px;
			max-height: 80vh;
			min-height: 60vh;
			overflow-y: auto;
			background-color: #F5F5F5;
			margin-bottom: 100rpx;

			.item {
				padding: 25rpx;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 35rpx;

				.title-time {
					.title {
						font-weight: bold;
					}

					.valid-time {
						font-size: 28rpx;
						margin-top: 15rpx;
						color: #999;
					}
				}

				.price-condition {
					.price {
						color: #FC483C;
						text-align: right;

						.price-num {
							font-size: 40rpx;
							font-weight: bold;
						}
					}

					.condition {
						font-size: 28rpx;
						margin-top: 15rpx;
						color: #999;
					}
				}

				.split-line {
					width: 100%;
					position: relative;
					margin: 30rpx 20rpx 0rpx 20rpx;
					background: #F6F8FA;
					border-bottom: 1px dashed #999;

					&:before,
					{
					top: -15rpx;
					left: -60rpx;
				}

				&:after {
					right: -60rpx;
					bottom: -15rpx;
				}

				&:before,
				&:after {
					content: '';
					position: absolute;
					width: 35rpx;
					height: 35rpx;
					border-radius: 50%;
					background: #F6F8FA;
					z-index: 1;
				}


			}

			.use-explain {
				width: 100%;
				margin-top: 20rpx;

				.explain-content {
					width: 100%;

					.li {
						display: block;
						position: relative;
						font-size: 24rpx;
						margin: 10rpx 0px;
						padding-left: 20rpx;
						color: #999;
					}

				}
			}
		}
	}
	// 底部按钮
	.addres-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		display: flex;
		z-index: 11;
		background: #fff;
		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	
		.addres-fixed-content {
			width: 100%;
			padding: 10rpx 50rpx;
	
			.add-addres-btn {
				background: linear-gradient(to right, #01ab63, #09BF09);
				text-align: center;
				color: #fff;
				padding: 20rpx 30rpx;
				border-radius: 200rpx;
			}
		}
	
	}
	}
</style>